<template>
	<view class="beijingse">
		<view class="ffffff ">
			<u-tabs :list="list1" :current="current" lineColor="#BA9549" @click="changetab" scrollable :activeStyle="{
				    color: '#222222',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#555555',
							fontWeight: '400',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs>
		</view>
		<view class="mainpadding2">
			<view class="flexcolumn" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				<view class="xiaohui ershil margin_top5">暂无数据</view>
			</view>
			<view class="mainpadding ffffff margin_top" v-for="item in list.data" :key="item.id"
				@click="tzddxq(item.id)">
				<!-- 订单状态:1=待支付,2=待审核,3=待发货,4=待收货,5=已完成,6=已取消 -->
				<view class="flexbetween xiahuaxian">
					<view class="ershil xiaohei">订单编号：{{item.order_no}}</view>
					<view class="ershil xiaohong" v-if="item.state==1 || item.state==7">待付款</view>
					<view class="ershil xiaohuang" v-if="item.state==2">待审核</view>
					<view class="ershil xiaohui" v-if="item.state==3">待发货</view>
					<view class="ershil xiaohui" v-if="item.state==4">待收货</view>
					<view class="ershil xiaohui" v-if="item.state==5">已完成</view>
					<view class="ershil xiaohui" v-if="item.state==6">已取消</view>
				</view>
				<view class="flexleft margin_top">
					<image style="min-width: 160rpx;width: 160rpx;height: 160rpx;" class="margin_right3"
						:src="item.goods_image_text" mode=""></image>
					<view class="flexcolumn" style="width: 100%;justify-content: space-between;align-items: flex-start;height: 160rpx;">
						<view class="ershil xiaohei yhxk">{{item.goods_name}}</view>
						<view class="ershil xiaohei yhxk">成交价：￥{{item.goods_price}}</view>
						<view class="flexbetween">
							<view class="ershil xiaohui">
								<text class="margin_right0" v-show="item.is_ky==1">空运 |</text>
								<text class="margin_right0" v-show="item.is_pgfw==1">抛光 |</text>
								<text class="margin_right0" v-show="item.is_fx==1">翻新 |</text>
								<text v-show="item.is_xccl==1">瑕疵处理</text>
							</view>
							<view class="ershil xiaohei">x1</view>
						</view>
					</view>
				</view>
				<view class="flexright margin_top2">
					<view class="strongtext xiaohei margin_right2">共1件</view>
					<view class="strongtext xiaohei margin_right2">合计:</view>
					<view class="smalltext xiaohong fonweight">￥{{item.pay_price}}</view>
				</view>
				<view class="flexright margin_top2">
					<!-- 订单状态:1=待支付,2=待审核,3=待发货,4=待收货,5=已完成,6=已取消 -->
					<view class="qxbtn flexcenter margin_right2" v-if="item.state==1" @click.stop="cancelorder(item.id)">取消订单</view>
					<view class="hhbtn flexcenter" @click.stop="pay(item.id)" v-if="item.state==1">支付佣金</view>
					<!-- <view class="hhbtn flexcenter" @click.stop="jumpdetail('/pages_paimai/shangczfpz?id=',item.id)" v-if="item.state==7">上传支付凭证</view> -->
					<view class="hhbtn flexcenter" @click.stop="uppingzheng(item.id,item.goods_id)" v-if="item.state==7">上传支付凭证</view>
					<view class="qxbtn flexcenter margin_right2" v-if="item.state==4" @click.stop="chakanwl(item.express_no,item.addressinfo.address)">查看物流</view>
					<view class="hhbtn flexcenter" v-if="item.state==4" @click.stop="shouhuo(item.id)">确认收货</view>
					<view class="qxbtn flexcenter" v-if="item.state==2 || item.state==3 || item.state==5 || item.state==6">查看详情</view>
				</view>
			</view>
		</view>
		<!-- 查看物流 -->
		<u-modal :show="ckwlModalshow" title="查看物流" confirmColor="#FF8505" confirmText="点击复制"
			:closeOnClickOverlay="true" @close="ckwlModalshow=false" @confirm="ckwlModalshow=false;copy(wlModalInfo.express_name+wlModalInfo.express_no)">
			<view class="slot-content flexcolumn mainpadding_top">
				<view class="">{{wlModalInfo.express_name}}</view>
				<view class="margin_top">{{wlModalInfo.express_no}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				wlModalInfo:{},
				ckwlModalshow:false,
				current: 0,
				resultcode: "",
				// 0=全部，1=待支付,2=待审核,3=待发货,4=待收货,5=已完成,6=已取消
				list1: [{
						name: '全部',
						value: 0,
					},
					{
						name: '待付款',
						value: 1,
					},
					{
						name: '待审核',
						value: 2,
					},
					{
						name: '待发货',
						value: 3,
					},
					{
						name: '待收货',
						value: 4,
					},
					{
						name: '已完成',
						value: 5,
					}
				],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onLoad(option) {
			let _this = this
			if(option.i){
				this.current = option.i
				this.resultcode = this.list1[option.i].value
			}
			
		},
		onShow() {
			this.init()
		},
		methods: {
			uppingzheng(order_id,goods_id){
				uni.navigateTo({
					url:"/pages_homepage/jingpaixq?id="+goods_id+"&order_id="+order_id
				})
			},
			pay(order_id){
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				let that = this
				httpRequest.request('/api/ordercl/payment', 'POST', {
					order_id
				}).then(res => {
					let data = res.data.wxconfig
					uni.hideLoading()
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								// 支付成功
								that.init()
							},
							fail: function(err) {
								// 取消支付
							}
						});
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			chakanwl(express_no,val){
				uni.navigateTo({
					url:"/pages_mypage/wuliuxx?id="+express_no+"&addr="+val
				})
			},
			ckwl(item){
				this.wlModalInfo = item
				this.ckwlModalshow = true
			},
			// 取消订单
			cancelorder(id) {
				httpRequest.modal('提示', '确认取消订单吗', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/ordercl/cancelOrder', 'GET', {
							id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			shouhuo(id){
				httpRequest.modal('提示', '确认收到货了吗', true, (resp) => {
					if (resp) {
						httpRequest.request('/api/ordercl/confirmOrder', 'GET', {
							id: id,
						}).then(res => {
							httpRequest.toast(res.msg)
							if(res.code==1){
								this.init()
							}
						})
					}
				})
			},
			// 跳转订单详情
			tzddxq(id) {
				uni.navigateTo({
					url: '/pages_mypage/dingdanxq?id=' + id
				})
			},
			changetab(e) {
				this.resultcode = e.value
				this.init()
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/ordercl/orderList', 'GET', {
					page: page || 1,
					limit: 12,
					state: this.resultcode
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hhbtn {
		width: 160rpx;
		padding: 15rpx 0;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		background: #BA9549;
		border: 1rpx solid #DDDDDD;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		box-sizing: border-box;
	}

	.qxbtn {
		width: 136rpx;
		padding: 15rpx 0;
		font-weight: 400;
		font-size: 22rpx;
		color: #555555;
		background: #fff;
		border: 1rpx solid #DDDDDD;
		box-sizing: border-box;
	}
</style>